<template>
  <a-form
    :model="form"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item
      :label="$t('364')"
      :rules="[{ required: true, message: $t('365') }]"
    >
      <a-input-password v-model:value="form.oldPwd" />
    </a-form-item>
    <a-form-item :label="$t('366')">
      <a-input-password v-model:value="form.newPwd" />
    </a-form-item>
    <a-form-item label="$t('367')">
      <a-input-password v-model:value="form.newPwd2" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" @click="doSavePassword">{{
        $t("224")
      }}</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import CommonDefine from "@/component/CommonDefine";
import { reactive } from "vue";
import JSEncrypt from "jsencrypt";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const appStore = CommonDefine.appStore();
const form = reactive({});
const encryptor = new JSEncrypt();
encryptor.setPublicKey(appStore.pubKey);

const doSavePassword = () => {
  if (form.newPwd == undefined || form.newPwd.trim().length < 8) {
    CommonDefine.alert(t("368"));
    return;
  }
  if (form.newPwd != form.newPwd2) {
    CommonDefine.alert(t("369"));
    return;
  }
  let pd = {
    oldPwd: encryptor.encrypt(form.oldPwd),
    newPwd: encryptor.encrypt(form.newPwd),
  };
  CommonDefine.apiPostArm("/api/v1/user/change-pwd", pd, (d) => {
    CommonDefine.alert(t("370"));
  });
};
</script>
